import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Package, Package2, ShoppingCart, Users2, ChevronLeft, ChevronRight } from 'lucide-react';
import { observer } from 'mobx-react-lite';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import appStore from '@/store/app';
import menuStore from '@/store/menu';
// 菜单数据结构是管理员按照自己的喜好意愿或者用户需求动态配置的
// 路由数据结构是开发人员根据组件公用确定的
// 注意：菜单结构可以不按照路由的结构来
// 注意：breadcrumb是按照菜单数据结构来的，不是按照路由数据结构
// 注意：tabList也是按照菜单数据结构来匹配的

export const ICONS: any = {
    Users2: Users2,
    Package: Package,
    ShoppingCart: ShoppingCart,
};

export const LeftMenu = observer(() => {
    const { pathname } = useLocation();
    return (
        <aside
            className={cn('hidden border-r bg-background sm:flex sm:flex-col  overflow-y-auto', {
                'w-14': appStore.isCollapsed,
                'w-[220px]': !appStore.isCollapsed,
            })}
        >
            {appStore.isCollapsed ? (
                <nav className='flex flex-col border-t border-b items-center gap-4 px-2 sm:py-4'>
                    <div
                        className='w-full flex justify-center text-primary'
                        onClick={() => {
                            appStore.setIsCollapsed(false);
                        }}
                    >
                        <ChevronRight />
                    </div>
                </nav>
            ) : (
                <>
                    <nav className='flex flex-col border-t border-b items-center gap-4 px-2 sm:py-4 mt-auto'>
                        <div
                            className='w-full flex justify-center text-primary'
                            onClick={() => {
                                appStore.setIsCollapsed(true);
                            }}
                        >
                            <ChevronLeft />
                        </div>
                    </nav>
                    <nav className='flex h-14 items-center border-b px-2 lg:h-[60px]'>
                        <Link
                            to='/console'
                            className={cn(
                                'flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-muted-foreground hover:text-primary',
                            )}
                        >
                            <Package2 className='h-5 w-5' />
                            <span>仪表盘</span>
                        </Link>
                    </nav>
                    <nav className='flex-1 flex flex-col gap-4 px-2 sm:py-4 overflow-auto'>
                        {menuStore.menus.map((menu) => {
                            const Icon = ICONS[menu.icon];
                            const { children } = menu;
                            if (children) {
                                return (
                                    <Accordion defaultValue='item-1' key={menu.id} type='single' collapsible>
                                        <AccordionItem value='item-1' className='border-none'>
                                            <AccordionTrigger className='text-foreground'>
                                                {menu.title}
                                            </AccordionTrigger>
                                            <AccordionContent>
                                                <nav className='pl-4 flex-1 flex flex-col gap-4 px-2 sm:py-4 overflow-auto'>
                                                    {children.map((child: any) => {
                                                        return (
                                                            <Link
                                                                key={child.pathname}
                                                                to={child.pathname}
                                                                className={cn(
                                                                    'flex items-center gap-3 rounded-lg px-3 py-2  transition-all hover:text-primary',
                                                                    {
                                                                        'bg-muted': pathname === child.pathname,
                                                                        'text-muted-foreground':
                                                                            pathname !== child.pathname,
                                                                        'text-primary': pathname === child.pathname,
                                                                    },
                                                                )}
                                                            >
                                                                <Icon className='h-5 w-5' />
                                                                <span>{child.title}</span>
                                                            </Link>
                                                        );
                                                    })}
                                                </nav>
                                            </AccordionContent>
                                        </AccordionItem>
                                    </Accordion>
                                );
                            }
                            return (
                                <Link
                                    key={menu.id}
                                    to={menu.pathname}
                                    className={cn(
                                        'flex items-center gap-3 rounded-lg px-3 py-2  transition-all hover:text-primary',
                                        {
                                            'bg-muted': pathname === menu.pathname,
                                            'text-muted-foreground': pathname !== menu.pathname,
                                            'text-primary': pathname === menu.pathname,
                                        },
                                    )}
                                >
                                    <Icon className='h-5 w-5' />
                                    <span>{menu.title}</span>
                                </Link>
                            );
                        })}
                    </nav>
                    <nav className='mt-auto p-4'>
                        <Card x-chunk='portal-02-chunk-0'>
                            <CardHeader className='p-2 pt-0 md:p-4'>
                                <CardTitle>Upgrade to Pro</CardTitle>
                                <CardDescription>
                                    Unlock all features and get unlimited access to our support team.
                                </CardDescription>
                            </CardHeader>
                            <CardContent className='p-2 pt-0 md:p-4 md:pt-0'>
                                <Button size='sm' className='w-full'>
                                    Upgrade
                                </Button>
                            </CardContent>
                        </Card>
                    </nav>
                </>
            )}
        </aside>
    );
});
